<template>
  <div class="map-container">
    <div id="map" style="height: 400px; width: 50%; margin-left: 200px"></div>
    <div class="input-card" style="margin-left: 200px; margin-top: 15px">
      <h4>添加围栏</h4>
      <div>
        <el-button @click="addPolygon" :disabled="polygonClosed"
          >添加围栏</el-button
        >
        <el-button @click="clearPolygon">重新绘制</el-button>
        <el-button @click="uploadPolygon">上传围栏</el-button>
        <el-button @click="nowAddress">定位当前</el-button>
        <el-button @click="getFenceData">获取围栏</el-button>
        <el-button @click="isInsidePolygon">判断是否在围栏内</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { createFence, getFence, isInside } from "@/api/controllerUrls";
import { ElNotification } from "element-plus";

export default {
  name: "MapComponent",
  setup() {
    let marker = null;
    const map = ref(null);
    let polygon = null; // Variable to store the polygon
    let polyline = null; // Variable to store the polyline
    const pathArr = [];
    const polygonClosed = ref(false);

    const initMap = async () => {
      AMapLoader.load({
        key: "1594d78499226837fd7174a87e17890d",
        version: "2.0",
      })
        .then((AMap) => {
          map.value = new AMap.Map("map", {
            viewMode: "3D",
            zoom: 15,
            resizeEnable: true,
            mapStyle: "amap://styles/normal",
            center: [116.296689, 40.042101],
            showMarker: true,
          });

          marker = new AMap.Marker({
            position: [116.296689, 40.042101],
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
            draggable: true,
          });
          map.value.add(marker);
          map.value.setFitView();

          map.value.on("click", (e) => {
            const lnglat = e.lnglat;
            const newPath = [lnglat.lng, lnglat.lat];

            if (pathArr.length > 0 && !polygonClosed.value) {
              pathArr.push(newPath);

              if (polyline) {
                polyline.setMap(null);
              }

              polyline = new AMap.Polyline({
                map: map.value,
                path: pathArr,
                strokeColor: "#3366FF",
                strokeOpacity: 1,
                strokeWeight: 3,
              });
            } else {
              pathArr.push(newPath);
            }

            // 判断是否闭合多边形
            const tolerance = 0.01; // 设置一个适当的误差阈值
            if (
              pathArr.length > 1 &&
              isCloseEnough(
                pathArr[pathArr.length - 1],
                pathArr[0],
                tolerance,
                map.value
              )
            ) {
              pathArr.push(pathArr[0]); // 将第一个点加入到路径末尾，闭合多边形
              addPolygon(); // 闭合多边形
              polygonClosed.value = true; // 将状态设置为闭合
            }
          });
        })
        .catch((e) => {
          console.error(e);
        });
    };

    // 定义一个函数来判断两个点是否在允许的误差范围内相等
    function isCloseEnough(point1, point2, tolerance, map) {
      const [lng1, lat1] = point1;
      const [lng2, lat2] = point2;
      const distance = Math.sqrt(
        Math.pow(lng2 - lng1, 2) + Math.pow(lat2 - lat1, 2)
      );
      const zoom = map.getZoom(); // 获取当前地图缩放级别
      const adjustedTolerance = tolerance / Math.pow(2, zoom - 10); // 调整误差容差值
      return distance <= adjustedTolerance;
    }

    // 添加多边形
    const addPolygon = () => {
      debugger;
      if (polygon) {
        polygon.setMap(null);
      }

      polygon = new AMap.Polygon({
        path: pathArr,
        fillColor: "#ccebc5",
        strokeOpacity: 1,
        fillOpacity: 0.5,
        strokeColor: "#2b8cbe",
        strokeWeight: 1,
        strokeStyle: "dashed",
        strokeDasharray: [5, 5],
      });

      polygon.on("mouseover", () => {
        polygon.setOptions({
          fillOpacity: 0.7,
          fillColor: "#7bccc4",
        });
      });

      polygon.on("mouseout", () => {
        polygon.setOptions({
          fillOpacity: 0.5,
          fillColor: "#ccebc5",
        });
      });

      map.value.add(polygon);
    };

    // 重新绘制
    const clearPolygon = () => {
      debugger;
      if (polygon) {
        polygon.setMap(null);
      }
      if (polyline) {
        polyline.setMap(null);
      }
      pathArr.length = 0; // 清空路径数组
      polygonClosed.value = false; // 将状态设置为未闭合
    };

    // 上传围栏
    const uploadPolygon = () => {
      debugger;
      if (polygonClosed.value) {
        console.log("闭合围栏坐标集合：", pathArr);

        const formData = new FormData();
        formData.append("fence", JSON.stringify(pathArr)); // 将 pathArr 存储到 'fence' 中

        createFence(formData)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        console.log("围栏未闭合，请完成多边形并闭合后再上传。");
      }
    };

    // 定位当前地址
    const nowAddress = () => {
      debugger;
      if (map.value) {
        AMap.plugin("AMap.Geolocation", function () {
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,
            timeout: 10000,
            buttonOffset: new AMap.Pixel(10, 20),
            zoomToAccuracy: true,
            buttonPosition: "RB",
          });
          map.value.addControl(geolocation);
          geolocation.getCurrentPosition();
        });
      }
    };

    // 获取围栏
    const getFenceData = () => {
      debugger;
      getFence(1).then((res) => {
        const fenceData = JSON.parse(res.data.fence);
        drawFenceOnMap(fenceData);
      });
    };

    // 在地图上绘制围栏(获取围栏后重绘)
    const drawFenceOnMap = (fenceData) => {
      debugger;
      if (map.value && fenceData.length > 0) {
        if (polygon) {
          polygon.setMap(null);
        }

        polygon = new AMap.Polygon({
          path: fenceData,
          fillColor: "#ccebc5",
          strokeOpacity: 1,
          fillOpacity: 0.5,
          strokeColor: "#2b8cbe",
          strokeWeight: 1,
          strokeStyle: "dashed",
          strokeDasharray: [5, 5],
        });

        polygon.on("mouseover", () => {
          polygon.setOptions({
            fillOpacity: 0.7,
            fillColor: "#7bccc4",
          });
        });

        polygon.on("mouseout", () => {
          polygon.setOptions({
            fillOpacity: 0.5,
            fillColor: "#ccebc5",
          });
        });

        map.value.add(polygon);
        map.value.setFitView(polygon);
      }
    };

    const isInsidePolygon = () => {
      debugger;
      if (polygonClosed.value && marker) {
        const markerPosition = marker.getPosition(); // 获取 marker 的坐标

        const formData = new FormData();
        formData.append("fence", JSON.stringify(pathArr)); // 将 pathArr 存储到 'fence' 中
        formData.append("point", JSON.stringify(markerPosition)); // 将 marker 的坐标存储到 'point' 中

        isInside(formData)
          .then((res) => {
            if (res.data.isInside == 1) {
              ElNotification({ message: "坐标在多边形内" });
            } else {
              ElNotification({ message: "坐标在多边形外部" });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        console.log("围栏未闭合或marker不存在,请完成多边形并闭合后再判断");
      }
    };

    onMounted(() => {
      initMap();
    });

    return {
      addPolygon,
      clearPolygon,
      uploadPolygon,
      polygonClosed,
      nowAddress,
      getFenceData,
      isInsidePolygon,
    };
  },
};
</script>

<style>
.map-container {
  margin: 10px 0;
}

#map {
  height: 400px;
  width: 100%;
}
</style>
